<template>
  <div class="index-page">
    <a-input-search
      v-model:value="searchTest"
      placeholder="请输入搜索关键词"
      enter-button="搜索"
      size="large"
      @search="onSearch"
    />
    <!--    {{ JSON.stringify(postList) }}-->
    <MyDivider />
    <a-tabs v-model:activeKey="activeKey" @change="onTabChange">
      <a-tab-pane key="post" tab="文章">
        <PostList :post-list="postList" />
      </a-tab-pane>
      <a-tab-pane key="picture" tab="图片">
        <PictureList :picture-list="pictureList" />
      </a-tab-pane>
      <a-tab-pane key="user" tab="用户">
        <UserList :user-list="userList" />
      </a-tab-pane>
    </a-tabs>
    <br>
    <hr>
    <br>
    <!-- 分页条 -->
    <el-pagination v-model:current-page="searchParams.current" v-model:page-size="searchParams.pageSize" :page-sizes="[4, 8, 12, 16]"
                   layout="jumper, total, sizes, prev, pager, next" background :total="total" @size-change="loadData(searchParams)"
                   @current-change="loadData(searchParams)" style="margin-top: 20px; justify-content: flex-end" />

  </div>
</template>

<script setup lang="ts">
import { ref, watchEffect } from "vue";
import PostList from "@/components/PostList.vue";
import PictureList from "@/components/PictureList.vue";
import UserList from "@/components/UserList.vue";
import MyDivider from "@/components/MyDivider.vue";
import { useRoute, useRouter } from "vue-router";
import request from '@/utils/request.ts'
import { message } from "ant-design-vue";
import axios from 'axios'

const total = ref(4)

const postList = ref([]);

const userList = ref([]);

const pictureList = ref([]);

const router = useRouter();
const route = useRoute();

const activeKey = route.params.category;

const searchTest = ref(route.query.text || "");

const initSearchParams = {
  type: activeKey,
  text: "",
  pageSize: 10,
  current: 1,
};

/**
 * 加载单类数据 ---> 新
 * @param params
 */
const loadData = (params: any) => {
  const { type } = params;
  if (!type) {
    message.error("类别为空");
  }
  const query = {
    ...params,
    searchText: params.text,
  };
  request.post("/search/all", query).then((res: any) => {
    if (type === "post") {
      postList.value = res.data;
      total.value = res.total
    } else if (type === "user") {
      userList.value = res.data;
      total.value = res.total
    } else if (type === "picture") {
      pictureList.value = res.data;
      total.value = 1000;
    }
  });
};

const searchParams = ref(initSearchParams);

watchEffect(() => {
  searchParams.value = {
    ...searchParams.value,
    text: route.query.text,
    type: route.params.category,
  } as any;
  loadData(searchParams.value);
});

const onSearch = (value: string) => {
  // alert(value);
  router.push({
    query: {
      ...searchParams.value,
      text: value,
    },
  });
};

const onTabChange = (key: string) => {
  router.push({
    path: `/${key}`,
    query: searchParams.value,
  });
};
</script>

<style scoped>
.demo-pagination-block + .demo-pagination-block {
  margin-top: 10px;
}
.demo-pagination-block .demonstration {
  margin-bottom: 16px;
}
</style>